<template>
  <div class="submit-dependency-page">
    <h2>提交标签依赖关系请求</h2>

    <div class="input-section">
      <label>源标签选择：</label>
      <select v-model="sourceTagIndex">
        <option disabled value="">请选择一个标签</option>
        <option v-for="tag in tags" :key="tag.index" :value="tag.index">
          {{ tag.tag_name }}
        </option>
      </select>
    </div>

    <div class="input-section">
      <label>目标标签选择：</label>
      <select v-model="targetTagIndex">
        <option disabled value="">请选择一个标签</option>
        <option v-for="tag in tags" :key="tag.index" :value="tag.index">
          {{ tag.tag_name }}
        </option>
      </select>
    </div>

    <div class="input-section">
      <label>权重：</label>
      <select v-model="weight" @change="customWeight = null">
        <option value="1.0">1.0</option>
        <option value="0.8">0.8</option>
        <option value="1.2">1.2</option>
        <option value="custom">自定义</option>
      </select>
      <input
        v-if="weight === 'custom'"
        v-model="customWeight"
        type="number"
        step="0.1"
        placeholder="请输入自定义权重"
      />
    </div>

    <div class="input-section">
      <label>操作类型：</label>
      <select v-model="actionType">
        <option disabled value="">请选择操作</option>
        <option value="1">添加依赖</option>
        <option value="0">删除依赖</option>
      </select>
    </div>

    <button @click="submitDependencyChangeRequest" :disabled="!isFormValid">
      提交请求
    </button>
  </div>
</template>

<script>
import axios from '@/axios';

export default {
  name: 'SubmitTagDependency',
  data() {
    return {
      tags: [],
      sourceTagIndex: '',
      targetTagIndex: '',
      weight: '1.0',
      customWeight: null,
      actionType: '',
    };
  },
  computed: {
    // 权重设置
    finalWeight() {
      return this.weight === 'custom' ? this.customWeight : parseFloat(this.weight);
    },
    // 表单验证
    isFormValid() {
      return this.sourceTagIndex && this.targetTagIndex && this.actionType !== '' && (this.finalWeight !== null);
    },
  },
  methods: {
    async fetchTags() {
      try {
        const response = await axios.get('/api/tag/algorithmtag');
        this.tags = response.data;
      } catch (error) {
        console.error('无法获取标签信息:', error);
      }
    },
    async submitDependencyChangeRequest() {
      try {
        const response = await axios.post('/api/moderation/submit_tag_dependency_change_request/', {
          source_tag_index: this.sourceTagIndex,
          target_tag_index: this.targetTagIndex,
          weight: this.finalWeight,
          add_or_delete: this.actionType,
        });
        alert(response.data.message || '请求已提交');
        this.resetForm();
      } catch (error) {
        console.error('提交失败:', error);
        alert('提交失败，请重试');
      }
    },
    resetForm() {
      this.sourceTagIndex = '';
      this.targetTagIndex = '';
      this.weight = '1.0';
      this.customWeight = null;
      this.actionType = '';
    },
  },
  mounted() {
    this.fetchTags();
  },
};
</script>

<style scoped>
.submit-dependency-page {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input-section {
  margin-bottom: 15px;
}

select,
input {
  padding: 8px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: 10px;
}

button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
</style>
